<template>
  <div>
    <!--  提示-->
    <div>
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item>您正在做的业务是:</el-breadcrumb-item>
        <el-breadcrumb-item>用户管理</el-breadcrumb-item>
        <el-breadcrumb-item>用户查询</el-breadcrumb-item>
      </el-breadcrumb>
    </div>

    <div>
      <!-- 条件查询 -->
      <b>根据姓名查询:</b>
      <el-input v-model="name" style="width: 150px;"/>
      <el-button type="primary" @click="init">查询</el-button>
    </div>

    <!--  表格-->
    <div>
      <el-table
          :data="userData"
          border
          style="width: 100%">
        <el-table-column
            fixed
            prop="loginId"
            label="姓名"
            width="120">
        </el-table-column>
        <el-table-column
            prop="email"
            label="邮箱"
            width="250">
        </el-table-column>
        <el-table-column
            prop="phone"
            label="电话"
            width="180">
        </el-table-column>
        <el-table-column
            prop="address"
            label="地址"
            width="300">
        </el-table-column>
        <el-table-column
            prop="gender"
            label="性别"
            width="120">
          <template slot-scope="scope">
            <p v-if="userData[scope.$index].gender==0">男</p>
            <p v-else-if="userData[scope.$index].gender==1">女</p>
            <p v-else>不男不女</p>
          </template>
        </el-table-column>
        <el-table-column
            fixed="right"
            label="操作"
            width="100">
          <template slot-scope="scope">
            <el-button @click="handleClick(scope.row)" type="text" size="medium ">查看</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!--  分页-->
    <div class="block">
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="Number(pageNum)"
          :page-sizes="[2, 4, 8, 16]"
          :page-size="Number(pageSize)"
          layout="total, sizes, prev, pager, next, jumper"
          :total="Number(total)">
      </el-pagination>
    </div>

    <!--  用户详情-->
    <div>
      <el-dialog title="用户详情:" :visible.sync="dialogFormVisible">

        <el-tabs v-model="activeName" type="card">
          <el-tab-pane label="用户信息" name="first">
            <el-form v-model="userForm" label-width="120px">
              <el-form-item label="姓名:">
                <b>{{ userForm.loginId }}</b>
              </el-form-item>

              <el-form-item label="邮箱:">
                <b>{{ userForm.email }}</b>
              </el-form-item>

              <el-form-item label="性别:">
                <b v-if="userForm.gender==0"><b>男</b></b>
                <b v-else-if="userForm.gender==1"><b>女</b></b>
                <b v-else><b>不男不女</b></b>
              </el-form-item>

              <el-form-item label="住址:">
                <b>{{ userForm.address }}</b>
              </el-form-item>

              <el-form-item label="电话:">
                <b>{{ userForm.phone }}</b>
              </el-form-item>

              <el-form-item label="用户创建时间:">
                <b>{{ userForm.createTime }}</b>
              </el-form-item>

              <el-form-item label="用户修改时间:">
                <b>{{ userForm.updateTime }}</b>
              </el-form-item>
            </el-form>
          </el-tab-pane>
          <el-tab-pane label="角色信息" name="second">

            <el-table
                :data="roleData"
                border
                style="width: 100%">
              <el-table-column
                  fixed
                  prop="name"
                  label="姓名"
                  width="120">
              </el-table-column>
              <el-table-column
                  prop="descn"
                  label="描述"
                  width="250">
              </el-table-column>
              <el-table-column
                  prop="createTime"
                  label="创建时间"
                  width="180">
              </el-table-column>
              <el-table-column
                  prop="updateTime"
                  label="修改时间"
                  width="300">
              </el-table-column>
            </el-table>
          </el-tab-pane>
          <el-tab-pane label="菜单信息" name="third">

            <el-tree :data="menuList" :props="defaultProps" @node-click="handleNodeClick"></el-tree>
          </el-tab-pane>


          <el-tab-pane label="权限信息" name="fourth">

            <el-tree :data="permissionData" :props="defaultProps" @node-click="handleNodeClick"></el-tree>

          </el-tab-pane>
        </el-tabs>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import axios from "axios";
import request from "../../request.js"

export default {
  name: "UserQueryDetails",
  data() {
    return {
      //U角色数据
      roleData:[],
      //菜单数据
      menuList:[],
      activeName: 'first',
      dialogFormVisible: false,
      name: '',
      pageNum: '',
      pageSize: '',
      total: '',
      userData: [],
      userForm: {
        loginId: '',
        email: '',
        gender: '',
        address: '',
        phone: '',
        createTime: '',
        updateTime: ''
      },
      //权限数据
      permissionData:[],
      //树形控件配置
      defaultProps: {
        children: 'list',
        label: 'name'
      }
    }
  }, methods: {
    init() {
      axios.get("http://localhost:8150/api/ucenter/wx/userQuery", {
        params: {
          'name': this.name,
          'pageNum': this.pageNum,
          'pageSize': this.pageSize
        }
      }).then(data => {
        if (data.data.flag==false) {
          this.$message({
            showClose: true,
            message: data.data.message,
            type: data.data.flag == true ? "success" : "error"
          })
          return;
        }
        this.userData = data.data.data.records;
        this.pageNum = data.data.data.current;
        this.pageSize = data.data.data.size;
        this.total = data.data.data.total;
      }).catch(e => {
        alert("错误信息为:" + e)
      })
    },
    //查看详情,查看它的权限和菜单已经角色
    handleClick(row) {
      console.log(row)
      axios.get("http://localhost:8150/api/ucenter/wx/" + row.id).then(data => {

        if (data.data.flag==false) {
          this.$message({
            showClose: true,
            message: data.data.message,
            type: data.data.flag == true ? "success" : "error"
          })
          return;
        }

        console.log(data.data.data);
        this.userForm.loginId = row.loginId;
        this.userForm.address = row.address;
        this.userForm.email = row.email;
        this.userForm.gender = row.gender;
        this.userForm.phone = row.phone;
        this.userForm.createTime = row.createTime;
        this.userForm.updateTime = row.updateTime;
        //角色集合
        this.roleData=data.data.data.roleList;
        //菜单集合
        this.menuList=data.data.data.menusList;
        //权限集合
        this.permissionData=data.data.data.permissionList;
      }).catch(e => {
        alert("C错误信息为:" + e)
      })
      this.dialogFormVisible = true;
    },//当前数量改变
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.pageSize = val;
      this.init();
    },
    //页码改变
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.pageNum = val;
      this.init();
    },
    //树形显示菜单列表
    handleNodeClick(data){
      console.log(data);
    }
  }, created() {
    this.init();
  }
}
</script>

<style scoped>

</style>